<template>
    <view>
        <template v-if="compName === 'vote'">
            <view class="vote_total_nums" v-if="live.ljrq_status == 1 || columnsurs.special" :style="'background-color:' + color_one + ';color:' + color_three + ';'">
                <view class="h4" v-if="columnsurs.special">
                    {{ columnsurs.special }}
                </view>
                <view class="vote_num_item" v-if="live.ljrq_status == 1 && live.ljrq_show_type == 0">
                    <view class="vote_num_title h4" :style="'color:' + color_three + ';'">参与选手</view>
                    <view class="vote_num_value" :style="'color:' + color_three + ';'">{{ live.vote_totle_count[0].counts }}</view>
                </view>
                <view class="vote_num_item" v-if="live.ljrq_status == 1 && live.ljrq_show_type == 0">
                    <view class="vote_num_title h4" :style="'color:' + color_three + ';'">累计人气值</view>
                    <view class="vote_num_value" :style="'color:' + color_three + ';'">{{ live.vote_totle_nums[0].nums }}</view>
                </view>
                <view class="vote_num_item" v-if="live.ljrq_status == 1 && live.ljrq_show_type == 0">
                    <view class="vote_num_title h4" :style="'color:' + color_three + ';'">访问量</view>
                    <view class="vote_num_value" :style="'color:' + color_three + ';'">{{ live.viewer_count }}</view>
                </view>
            </view>

            <view class="search" :style="'border: ' + (color_one ? '2rpx solid ' + color_one : '') + ';'" v-if="vote.hide_search_box != 1">
                <form @submit="votesearch">
                    <input
                        @input="search"
                        :placeholder="live.id == 20242 ? '请输入姓名' : '请输入姓名'"
                        value=""
						placeholder-class="phcolor"
                        :placeholder-style="'color:' + color_one + ';'"
                        :style="'color:' + color_one + ';background-color: ' + color_three + ';'"
                    />
                    <!-- <input bindinput="search" placeholder="{{live.holder}}" value="" placeholder-style="color:{{color_one}};" style="color:{{color_one}};background-color: {{color_three}};" wx:if="{{color_status == '1'}}"></input> -->
                    <!-- <input
                        @input="search"
                        :placeholder="live.id == 20242 ? '请输入姓名' : '请输入姓名'"
                        value=""
                        placeholder-class="phcolor"
                        :style="'color:' + color_one + ';background-color: ' + color_three + ';'"
						v-if="color_status == '1'"
                        v-else
                    /> -->
                    <!-- <input bindinput="search" placeholder="{{live.holder}}" value="" placeholder-class="phcolor" style="color:{{color_one}};background-color: {{color_three}};" wx:else></input> -->
                    <view @tap="votesearch" class="search_icon" :style="'background-color:' + color_three + ';'">
                        <text class="iconfont icon-sousuo" :style="'color:' + (color_one ? color_one : '#fff;')"></text>
                    </view>
                </form>
            </view>

            <view v-else-if="vote.hide_search_box == 1" style="margin-top: 8px"></view>

            <!-- <view class="AnchorRank ">
  <view class="AnchorRank-title" wx:if="{{live.tou_djs_status == 1}}" style="color:{{color_three}};background-color:{{color_one}}">
    <view class="AnchorRank-name" wx:if="{{vote.vote_downtime_status && !live.tou_djs_text}}" style="color:{{color_three}};">{{vote.vote_downtime_status==1?'距离投票开始':vote.vote_downtime_status==2?'距离投票结束':'投票已结束'}}</view>
    <view class="AnchorRank-name" wx:if="{{live.tou_djs_text}}" style="color:{{color_three}};">{{live.tou_djs_text}}</view>
    <view class="AnchorRank-time" style="color:{{color_three}};">
      {{vote.vote_downtime_status!=3?vote_downtime.day:'00'}}天
      {{vote.vote_downtime_status!=3?vote_downtime.hour:'00'}}时
      {{vote.vote_downtime_status!=3?vote_downtime.minute:'00'}}分
      {{vote.vote_downtime_status!=3?vote_downtime.second:'00'}}秒
    </view>
  </view>
</view> -->

            <view class="vote_nums" :style="'display:block;color:' + color_three + ';background-color:' + color_one + ';'">
                <view class="vote_num_item" style="width: 100%" v-if="live.tou_djs_status == 1">
                    <view class="vote_num_title" v-if="vote.vote_downtime_status && !live.tou_djs_text" :style="'color:' + color_three + ';'">
                        {{ vote.vote_downtime_status == 1 ? '距离投票开始' : vote.vote_downtime_status == 2 ? '距离投票结束' : '投票已结束' }}
                    </view>
                    <view class="vote_num_title" v-if="live.tou_djs_text" :style="'color:' + color_three + ';'">{{ live.tou_djs_text }}</view>
                    <view class="vote_num_value time" style="font-size: 25rpx">
                        {{ vote.vote_downtime_status != 3 ? vote_downtime.day : '00' }}
                        <text style="margin: 0 22rpx">天</text>
                        {{ vote.vote_downtime_status != 3 ? vote_downtime.hour : '00' }}
                        <text style="margin: 0 22rpx">时</text>
                        {{ vote.vote_downtime_status != 3 ? vote_downtime.minute : '00' }}
                        <text style="margin: 0 22rpx">分</text>
                        {{ vote.vote_downtime_status != 3 ? vote_downtime.second : '00' }}
                        <text style="margin: 0 22rpx">秒</text>
                    </view>
                </view>
            </view>

            <view class="AnchorRankList" :style="'border-color: ' + color_one + ';' + (vote.vote_show_top3 != 1 ? 'padding-top:12px' : '')">
                <view
                    :class="'AnchorRankList-itemTop is-item' + (index + 1)"
                    v-if="item.id && index < 3 && vote.vote_show_top3 == 1"
                    v-for="(item, index) in vote_data"
                    :key="index"
                >
                    <view class="AnchorRankList-top" @tap="gotoVoteInfo" :data-xuanid="item.id" :data-token="live.token">
                        <view class="DyImg AnchorRankList-pic">
                            <image :src="item.pic" :lazyLoad="true" mode="aspectFill"></image>
                        </view>
                        <span class="AnchorRankList-topBg"></span>
                        <span class="AnchorRankList-name">{{ item.name }}</span>
                    </view>

                    <view class="AnchorRankList-bottom" v-if="item.team_name">
                        <span class="AnchorRankList-catagory" :style="'color:' + color_one + ';border-color:' + color_one + ';background-color:' + color_three + ';'">
                            {{ item.team_name }}
                        </span>
                    </view>

                    <view
                        class="AnchorRankList-bottom"
                        v-if="(vote.vote_downtime_status != 1 && vote.hide_data_before == 1) || vote.hide_data_before == 0"
                        :style="'color:' + color_one + ';'"
                    >
                        {{ item.votes }}{{ columnsurs.zan }}
                    </view>

                    <view
                        class="AnchorRankList-liveRoom"
                        @tap="bindopenvote"
                        v-if="(vote.vote_downtime_status != 1 && vote.hide_data_before == 1) || vote.hide_data_before == 0"
                        :data-xuan_id="item.id"
                        :data-xuan_name="item.name"
                        :data-index="index"
                        :data-xuan_pic="item.pic"
                        :style="'color:' + color_three + ';background-color:' + color_one + ';'"
                    >
                        {{ columnsurs.award ? columnsurs.award : '为ta助力' }}
                    </view>
                </view>
                <view class="AnchorRankList-item" v-if="item.id && index <= 2 && vote.vote_show_top3 != 1" v-for="(item, index) in vote_data" :key="index">
                    <view class="AnchorRankList-left" @tap="gotoVoteInfo" :data-xuanId="item.id" :data-token="live.token">
                        <!-- <span class="AnchorRankList-rank">4</span> -->
                        <view class="AnchorRankList-photo" :style="'border-color:' + color_one + ';'">
                            <image :src="item.pic" :lazyLoad="true" mode="aspectFill"></image>
                            <!-- <text wx:if="{{(vote.vote_downtime_status != 1 && vote.hide_data_before == 1) || vote.hide_data_before == 0}}" style="color:{{color_three}};background-color:{{color_one}};">{{index + 1}}</text> -->
                        </view>
                        <view class="AnchorRankList-info">
                            <view class="AnchorRankList-txt">
                                <span class="AnchorRankList-name" :style="'color:' + color_one + ';'">
                                    {{ item.name }}
                                    <text v-if="item.team_name" class="AnchorRankList-team" :style="' border-color: ' + color_one + ';'">{{ item.team_name }}</text>
                                </span>
                                <!-- <span class="AnchorRankList-catagory" style="text-align: left;color:{{color_one}};" wx:if="{{item.team_name}}">{{item.team_name}}</span> -->
                                <span
                                    class="AnchorRankList-paiming"
                                    v-if="(vote.vote_downtime_status != 1 && vote.hide_data_before == 1) || vote.hide_data_before == 0"
                                    :style="'color:' + color_one + ';'"
                                >
                                    <text class="iconfont icon-paihang"></text>
                                    排名：{{ index + 1 }}
                                </span>
                            </view>
                        </view>
                    </view>

                    <view class="AnchorRankList-right">
                        <view
                            class="AnchorRankList-liveRoom"
                            @tap="bindopenvote"
                            v-if="(vote.vote_downtime_status != 1 && vote.hide_data_before == 1) || vote.hide_data_before == 0"
                            :data-xuan_id="item.id"
                            :data-xuan_name="item.name"
                            :data-index="index"
                            :data-xuan_pic="item.pic"
                            :style="'color:' + color_three + ';background-color:' + color_one + ';'"
                        >
                            {{ columnsurs.award ? columnsurs.award : '为ta助力' }}
                        </view>
                        <span
                            class="AnchorRankList-statu"
                            v-if="(vote.vote_downtime_status != 1 && vote.hide_data_before == 1) || vote.hide_data_before == 0"
                            :style="'color:' + color_one + ';'"
                        >
                            <text class="iconfont icon-renqi1"></text>
                            {{ item.votes }}{{ columnsurs.zan }}
                        </span>
                    </view>
                </view>

                <view
                    :class="'AnchorRankList-item ' + (index == 3 && vote.vote_show_top3 == 1 ? 'AnchorRankList-item-first' : '')"
                    :style="index == 3 && color_one && vote.vote_show_top3 == 1 ? 'box-shadow: inset 0px 10px 10px -10px ' + color_one : ''"
                    v-if="item.id && index > 2"
                    v-for="(item, index) in vote_data"
                    :key="index"
                >
                    <view class="AnchorRankList-left" @tap="gotoVoteInfo" :data-xuanId="item.id" :data-token="live.token">
                        <!-- <span class="AnchorRankList-rank">4</span> -->
                        <view class="AnchorRankList-photo" :style="'border-color:' + color_one + ';'">
                            <image :src="item.pic" :lazyLoad="true" mode="aspectFill"></image>
                            <!-- <text wx:if="{{(vote.vote_downtime_status != 1 && vote.hide_data_before == 1) || vote.hide_data_before == 0}}" style="color:{{color_three}};background-color:{{color_one}};">{{index + 1}}</text> -->
                        </view>
                        <view class="AnchorRankList-info">
                            <view class="AnchorRankList-txt">
                                <span class="AnchorRankList-name" :style="'color:' + color_one + ';'">
                                    {{ item.name }}
                                    <text v-if="item.team_name" class="AnchorRankList-team" :style="' border-color: ' + color_one + ';'">{{ item.team_name }}</text>
                                </span>
                                <!-- <span class="AnchorRankList-catagory" style="text-align: left;color:{{color_one}};" wx:if="{{item.team_name}}">{{item.team_name}}</span> -->
                                <span
                                    class="AnchorRankList-paiming"
                                    v-if="(vote.vote_downtime_status != 1 && vote.hide_data_before == 1) || vote.hide_data_before == 0"
                                    :style="'color:' + color_one + ';'"
                                >
                                    <text class="iconfont icon-paihang"></text>
                                    排名：{{ index + 1 }}
                                </span>
                            </view>
                        </view>
                    </view>

                    <view class="AnchorRankList-right">
                        <view
                            class="AnchorRankList-liveRoom"
                            @tap="bindopenvote"
                            v-if="(vote.vote_downtime_status != 1 && vote.hide_data_before == 1) || vote.hide_data_before == 0"
                            :data-xuan_id="item.id"
                            :data-xuan_name="item.name"
                            :data-index="index"
                            :data-xuan_pic="item.pic"
                            :style="'color:' + color_three + ';background-color:' + color_one + ';'"
                        >
                            {{ columnsurs.award ? columnsurs.award : '为ta助力' }}
                        </view>
                        <span
                            class="AnchorRankList-statu"
                            v-if="(vote.vote_downtime_status != 1 && vote.hide_data_before == 1) || vote.hide_data_before == 0"
                            :style="'color:' + color_one + ';'"
                        >
                            <text class="iconfont icon-renqi1"></text>
                            {{ item.votes }}{{ columnsurs.zan }}
                        </span>
                    </view>
                </view>

                <view v-if="vote_data.length > 9">
                    <view class="load_tip" v-if="!(vote_load === false ? false : true)">- 暂无更多数据 -</view>
                    <view class="load_tip" v-if="!(vote_load === true ? false : true)">- 上拉加载 -</view>
                    <view class="load_icon w_100 t_c" v-if="vote_load == 2">
                        <image :lazyLoad="true" mode="aspectFill" src="/static/wxz_wzbagent/resource/images/load.gif"></image>
                    </view>
                </view>
            </view>
        </template>
    </view>
</template>

<script>
var app = getApp();
export default {
    props: ['data', 'compName'],
    computed: {
        live() {
            return this.data.live;
        },
		vote_downtime(){
			return this.data.vote_downtime;
		},
        columnsurs() {
            return this.data.columnsurs;
        },
        color_one() {
            return this.data.color_one;
        },
        color_three() {
            return this.data.color_three;
        },
        vote() {
            return this.data.vote;
        },
        color_status() {
            return this.data.color_status;
        },
        index() {
            return this.data.index;
        },
        item() {
            return this.data.item;
        },
        vote_data() {
            return this.data.vote_data;
        },
        vote_load() {
            return this.data.vote_load;
        },

        gotoVoteInfo() {
            return this.data.gotoVoteInfo;
        },
        bindopenvote() {
            return this.data.bindopenvote;
        }
    },
	methods: {
        search(event) {
            this.search = event.target.value
        },	
		votesearch() {
			this.getvote('search');
		    //return this.$emit("votesearch");
		},
		getvote: function(type) {
			var that = this;
			if (type == 'search') {
				that.setData({
					vote_page: 1,
					columnsurs_selected: 'card1'
				});
			}
			var vote_data = that.vote_data;
			app.globalData.util.request({
				url: 'lives_new&r=get_vote',
				data: {
					rid: that.rid,
					live_id: that.live_id,
					search: that.search,
					vote_page: that.vote_page,
					nav_id: that.tab
				},
				cachetime: '0',
				showLoading: true,
				success: function(t) {
					var data = t.data.data.vote_data;
					if (type == 'search') {
						that.setData({
							vote_data: data,
							vote_load: true
						});
					}
					if (type == 'vote') {
						if (data.length !== 0) {
							that.setData({
								vote_data: vote_data.concat(data),
								vote_load: true
							});
						}
						if (data.length < 10) {
							//没值表示到底了
							that.setData({
								vote_load: false
							});
						}
					}
				}
			});
		},
	}
};
</script>
<style>
@import '../movie/movie.css';
@import './vote.css';
@import './new_vote_list.css';
</style>
